<!-- 任务列表 -->
<template>
  <div class='classify'>
    <search ref="mysearch"
              @doReset="doReset"
              @doQuery="doRefresh"
              :ruleform="ruleForm">
      <template slot="top">
        <el-form-item label="名称：" prop="name">
          <el-input type="input"
                    v-model="ruleForm.name"
                    @keyup.enter.native="doRefresh"
                    placeholder="请输入名称"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="别称：" prop="Niname">
          <el-input type="input"
                    @keyup.enter.native="doRefresh"
                    v-model="ruleForm.Niname"
                    placeholder="请输入别称"
                    clearable></el-input>
        </el-form-item>   
      </template>
    </search>
      <myTable ref="mytable"
             :config="tableconfig"
             @handleSelectChange="handleSelectChange">
      <div slot="mytablebody">
        <el-button type="primary"
                  icon="el-icon-plus"
                  @click="$router.push({ path: 'addpackage' })">新增</el-button>
      </div>
       <!-- Id -->
      <template v-slot:ID="{ data }">
          {{ data.ID }}
      </template>
       <!-- 状态  @click.native="doShowStatus(data)" -->
      <!-- <template v-slot:Status="{ data }">
        <myTag :name="data.Status"
               style="cursor: pointer"></myTag>
      </template> -->
      <!-- 操作 -->
      <template v-slot:operation="{ data }">
        <el-link class="blue-link"
                 @click="$router.push({ path: 'editbrand', query: { id: data['ID'] } })">
          编辑
        </el-link>
      </template>
      </myTable>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getToken } from "@/utils/auth";


export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    //这里存放数据
    return {
      // 搜索数据
       ruleForm: {
                name: '',
                Niname: '',
            },
      tableconfig:{
        loading: false,
        isselection: true,
        ispagination: true,
        tabledata: [],
        isindex: true,
        thead: [
            { sort: 'custom', label: 'ID', prop: 'ID',  type: 'slot', width: 150 },
            { sort: 'custom', label: '名称', prop: 'name', width: 250 },
            { sort: null, label: '别称', prop: 'Niname', width: 300,},
            { sort: 'custom', label: '状态 ', prop: 'Status', type: 'slot' },
            { sort: null, label: '图片', prop: 'images', width: 300,},
            { sort: null, label: '修改时间', prop: 'editTime', width: 150 },
            { sort:'custom', label: '操作', prop: 'operation', width: 150 ,type: 'slot'},
        ],
        currentpage: 1,
        pagesize: 20,
        total: 0,
      },
    };
  },
  //监听属性 类似于data概念
  computed: {
     
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
     // 重置搜索
        doReset() {
            Object.keys(this.ruleForm).map(x => {
                this.ruleForm[x] = '';
            });
            this.$message({
                message: '已重置',
                type: 'success',
            });
            this.doRefresh();
        },
        // 刷新
        doRefresh(){
          console.log(111)
        },
        handleSelectChange(){
          console.log(222);
        }

  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    // console.log('standard2');
    // console.log(getToken());
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
     
  },
  //beforeCreate() {}, //生命周期 - 创建之前
  //beforeMount() {}, //生命周期 - 挂载之前
  //beforeUpdate() {}, //生命周期 - 更新之前
  //updated() {}, //生命周期 - 更新之后
  //beforeDestroy() {}, //生命周期 - 销毁之前
  //destroyed() {}, //生命周期 - 销毁完成
  //activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang="scss">
@import './../../assets/reset.css';
.classify{
  padding: 10px;

}
</style>